<template>
	<div class="steps-container layout-pd">
		<el-card shadow="hover" header="秒杀商品">
			<el-steps :active="stepsActive" align-center>
				<el-step title="选择秒杀商品">
					<template #icon>
						<SvgIcon name="iconfont icon-1_round_solid" :size="40" />
					</template>
				</el-step>
				<el-step title="填写商品信息">
					<template #icon>
						<SvgIcon name="iconfont icon-2_round_solid" :size="40" />
					</template>
				</el-step>
				<el-step title="修改商品详情">
					<template #icon>
						<SvgIcon name="iconfont icon-3_round_solid" :size="40" />
					</template>
				</el-step>
			</el-steps>
			<section class="mt10">
				<stepOne v-if="stepsActive === 1"></stepOne>
				<stepTwo v-if="stepsActive === 2"></stepTwo>
				<stepThree v-if="stepsActive === 3"></stepThree>
			</section>
			<section class="mt10 flex" style="justify-content: center;">
				<el-button @click="onPreviousSteps" v-if="stepsActive != 1"  class="mt15" type="primary">
					上一步
				</el-button>
				<el-button @click="onSubmites"  v-if="stepsActive == 3" class="mt15" type="primary">
					提交
				</el-button>
				<el-button @click="onNextSteps" v-if="stepsActive != 3" class="mt15" type="primary">
					下一步
				</el-button>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="pagesSteps">
import { ref,reactive, defineAsyncComponent, nextTick, onMounted } from 'vue';
import { addSeckillGoods } from '/@/api/marketing';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useAddSeckillGoods } from '@/stores/addSeckillGoods'
const stepOne = defineAsyncComponent(() => import('/@/views/marketing/seckillManage/goods/components/stepOne.vue'))
const stepTwo = defineAsyncComponent(() => import('/@/views/marketing/seckillManage/goods/components/stepTwo.vue'))
const stepThree = defineAsyncComponent(() => import('/@/views/marketing/seckillManage/goods/components/stepThree.vue'))
const stepOneRef = ref();
const stepTwoRef= ref();
const stepThreeRef = ref();
const router = useRouter();
const state = reactive({
	// 添加图片类型
	goodsData:{},
})
const storeSeckillGoods = useAddSeckillGoods();
storeSeckillGoods.resetAll();
const step = ref(0);
const isNext = ref(0);

// 定义变量内容
const stepsActive = ref(1);

const updateGoodsData = (newData:any) => {
	state.goodsData = Object.assign({},newData);
}

// 上一步
const onPreviousSteps = () => {
	stepsActive.value--;
	if(stepsActive.value <= 1){
		stepsActive.value = 1;
	}

};
// 下一步点击
const onNextSteps = () => {
	if(stepsActive.value == 1){//当前在第一步
		if(!storeSeckillGoods.seckillImage){
			ElMessage.info('还没有添加商品!');
			return;
		}
	}
	if(stepsActive.value == 2){//当前在第二步
		if(!storeSeckillGoods.seckillTitle){
			ElMessage.info('还没有添加活动标题!');
			return;
		}
		if(!storeSeckillGoods.seckillInfo){
			ElMessage.info('还没有添加活动简介!');
			return;
		}
		if(!storeSeckillGoods.seckillTempId){
			ElMessage.info('还没有添加运费模板!');
			return;
		}
		if(storeSeckillGoods.seckillTime.length == 0){
			ElMessage.info('还没有添加活动日期!');
			return;
		}
		if(!storeSeckillGoods.seckillTimeId){
			ElMessage.info('还没有添加活动时间!');
			return;
		}
		if(!storeSeckillGoods.seckillStatus){
			ElMessage.info('还没有添加活动状态!');
			return;
		}
		let i = 0, number = 0, selecta = 0, selectb = 0;
		for(i = 0; i < storeSeckillGoods.productInfos.length; i++ ){
			if(!storeSeckillGoods.productInfos[i].isSelected){
				number++;
				break;
			}
			if(storeSeckillGoods.productInfos[i].isSelected && !storeSeckillGoods.productInfos[i].price){
				selecta++;
				break;
			}
			if(storeSeckillGoods.productInfos[i].isSelected && !storeSeckillGoods.productInfos[i].quota){
				selectb++;
				break;
			}
			
		}
		if(number == storeSeckillGoods.productInfos.length){
			ElMessage.info('请至少勾选一个参与秒杀的商品!');
			return;
		}
		if(selecta){
			ElMessage.info('勾选参与秒杀的商品没有填写秒杀价!');
			return;
		}
		if(selectb){
			ElMessage.info('勾选参与秒杀的商品没有填写限量!');
			return;
		}
	}
	stepsActive.value++;
	if(stepsActive.value >= 2){
		stepsActive.value = 2;
	}
};


const onSubmites= () => {
	if(stepsActive.value == 3){
		if(!storeSeckillGoods.seckillDescription){
			ElMessage.info('请输入商品详情');
			return;
		}
	}
	storeSeckillGoods.productInfos = storeSeckillGoods.removeItem();
	addSeckillGoods(storeSeckillGoods).then(res => {
		if(res.code == 400){
			ElMessage.success('添加成功');
			stepsActive.value = 1;
			storeSeckillGoods.resetAll()
			router.push({
				path: '/marketing/seckillManage/goods/index',
			});
		}
	})
}
</script>
